<template>
    <div id="activityDayDetail">
        <h2>{{mainTitle}}</h2>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="form.subTitle" placeholder='请输入标题'></el-input>
            </el-form-item>
            <el-form-item label="日程内容">
                <el-input v-model="form.content" type='textarea' rows='5' placeholder='请输入项目概述'></el-input>
            </el-form-item>
            <el-form-item label='活动图片'>
                <el-upload
                    class="upload-demo"
                    :action="uploadUrl"
                    :on-success='uploadSuccess'
                    :on-remove='delFiless'
                     multiple
                    :limit="4">
                    <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
            </el-form-item>
            <el-form-item label='活动视频'>
                <el-input v-model="form.videoJson" placeholder='请输入视频链接'></el-input>
            </el-form-item>
            <el-form-item label="活动模板">
                <el-select style="width: 100%" v-model="form.template" placeholder="请选择活动模板">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item style="text-align: center">
                <el-button v-if="first"  type="primary" @click="onSubmit">提交</el-button>
                <el-button v-else  type="primary" @click="changeDetail">提交修改</el-button>
                <el-button  type="primary" @click="goback">取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<script>
  export default {
    data() {
      return {
        form: {},
        fileList: [],
        mainTitle: sessionStorage.getItem('maintit'),
        first: true,
        uploadUrl: this.$uploadUrl,
      }
    },
    mounted() {
      this.getDayDetail()
    },
    methods: {
      delFiless(file) {
        debugger
        let url = file.response.data.fileUrl
        this.fileList.splice(this.fileList.indexOf(url), 1)
      },
      uploadSuccess(file) {
            let data = file.data
            this.fileList.push(data.fileUrl)
      },
      changeDetail() {
          console.log(this.fileList)
          debugger
          let {subTitle, content, videoJson, template} = this.form
          let param = {
              mainTitle: this.mainTitle,
              scheduleId: this.$route.query.id,
              subTitle: subTitle,
              content: content,
              imgJson: JSON.stringify(this.fileList),
              videoJson: videoJson,
              template: template
          }
          this.$api.apiEditDayDetail(param, res => {
            if(res.data != 'error') {
              this.$message({
                type: 'success',
                message: '修改日程成功'
              })
              if(this.mainTitle)
                sessionStorage.removeItem('maintit')
              this.$router.go(-1)
            } else {
              this.$message({
                type: 'error',
                message: 'error'
              })
            }
            
          })
      },
      onSubmit() {
        let {subTitle, content, videoJson, template} = this.form
        let param = {
            mainTitle: this.mainTitle,
            scheduleId: this.$route.query.id,
            subTitle: subTitle,
            content: content,
            imgJson: JSON.stringify(this.fileList),
            videoJson: videoJson,
            template: template
        }
        this.$api.apiAddActivityDayDetail(param, res => {
          if(res.data != 'error') {
              this.$message({
                type: 'success',
                message: '添加日程成功'
              })
              if(this.mainTitle)
                sessionStorage.removeItem('maintit')
              this.$router.go(-1)
          } else {
              this.$message({
                type: 'error',
                message: 'error'
              })
          }
        })
      },
      goback() {
          if(this.mainTitle)
              sessionStorage.removeItem('maintit')
          this.$router.go(-1)
      },
      getDayDetail() {
        let param = {
          schId: this.$route.query.id
        }
        this.$api.apiViewDayDetail(param, res => {
          if(res.data != null) {
            this.first = false
            this.form = res.data
          } else {
            this.first = true
          }
            
        })
      }
    }
  }
</script>
<style lang="scss">
#activityDayDetail {
    width: 64%;
    margin: 30px auto;
    h2, .el-form-item:last-child {
        text-align: center
    }
}
</style>
